<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全新职位卡片设计预览</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles/jh_dashboard.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 40px 20px;
            min-height: 100vh;
        }
        
        .preview-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        
        .preview-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .preview-header h1 {
            color: #1a202c;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .preview-header p {
            color: #718096;
            font-size: 1.125rem;
            margin: 0;
        }
        
        .comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .comparison-section h3 {
            text-align: center;
            margin-bottom: 20px;
            padding: 12px 24px;
            border-radius: 12px;
            font-weight: 600;
        }
        
        .old-design h3 {
            background: #fed7d7;
            color: #c53030;
        }
        
        .new-design h3 {
            background: #c6f6d5;
            color: #2f855a;
        }
        
        .old-card {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
        }
        
        .old-card h4 {
            margin: 0 0 8px 0;
            color: #2d3748;
        }
        
        .old-card p {
            margin: 4px 0;
            color: #718096;
            font-size: 0.9rem;
        }
        
        .old-card .tags {
            display: flex;
            gap: 4px;
            margin-top: 12px;
        }
        
        .old-card .tag {
            background: #edf2f7;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            color: #4a5568;
        }
        
        @media (max-width: 768px) {
            .comparison {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .preview-container {
                padding: 20px;
            }
            
            .preview-header h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="preview-container">
        <div class="preview-header">
            <h1><i class="fas fa-magic"></i> 职位卡片设计对比</h1>
            <p>从简陋朴素到现代精美的完美蜕变</p>
        </div>

        <div class="comparison">
            <div class="comparison-section old-design">
                <h3><i class="fas fa-times-circle"></i> 原始设计</h3>
                <div class="old-card">
                    <h4>Data Scientist (Python/SQL)</h4>
                    <p><i class="fas fa-building"></i> Listopro</p>
                    <p><i class="fas fa-map-marker-alt"></i> Remote</p>
                    <p><i class="fas fa-dollar-sign"></i> 7750 USD/Mes</p>
                    <p><span style="background:#e6fffa; color:#00a693; padding:2px 8px; border-radius:4px; font-size:0.8rem;">66% 综合匹配度</span></p>
                    <div class="tags">
                        <span class="tag">Python</span>
                        <span class="tag">SQL</span>
                        <span class="tag">Machine Learning</span>
                    </div>
                </div>
            </div>
            
            <div class="comparison-section new-design">
                <h3><i class="fas fa-check-circle"></i> 全新设计</h3>
                <div id="newDesignCards"></div>
            </div>
        </div>

        <div style="text-align: center; padding: 40px 0; border-top: 2px solid #edf2f7;">
            <h2 style="color: #2d3748; margin-bottom: 16px;">🎯 设计改进亮点</h2>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px;">
                <div style="text-align: center; padding: 20px;">
                    <div style="width: 60px; height: 60px; margin: 0 auto 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-palette" style="color: white; font-size: 1.5rem;"></i>
                    </div>
                    <h4 style="margin: 0 0 8px 0; color: #2d3748;">现代化设计</h4>
                    <p style="margin: 0; color: #718096; font-size: 0.9rem;">渐变背景、圆角卡片、精美阴影</p>
                </div>
                <div style="text-align: center; padding: 20px;">
                    <div style="width: 60px; height: 60px; margin: 0 auto 12px; background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-mouse-pointer" style="color: white; font-size: 1.5rem;"></i>
                    </div>
                    <h4 style="margin: 0 0 8px 0; color: #2d3748;">丰富交互</h4>
                    <p style="margin: 0; color: #718096; font-size: 0.9rem;">悬停动效、点击反馈、状态变化</p>
                </div>
                <div style="text-align: center; padding: 20px;">
                    <div style="width: 60px; height: 60px; margin: 0 auto 12px; background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-mobile-alt" style="color: white; font-size: 1.5rem;"></i>
                    </div>
                    <h4 style="margin: 0 0 8px 0; color: #2d3748;">响应式布局</h4>
                    <p style="margin: 0; color: #718096; font-size: 0.9rem;">完美适配各种设备尺寸</p>
                </div>
                <div style="text-align: center; padding: 20px;">
                    <div style="width: 60px; height: 60px; margin: 0 auto 12px; background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-chart-line" style="color: white; font-size: 1.5rem;"></i>
                    </div>
                    <h4 style="margin: 0 0 8px 0; color: #2d3748;">信息可视化</h4>
                    <p style="margin: 0; color: #718096; font-size: 0.9rem;">匹配度、推荐原因直观展示</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 生成新设计的职位卡片
        const newCard = {
            id: 'demo-job',
            title: 'Data Scientist (Python/SQL)',
            company: 'Listopro',
            location: 'Remote',
            salary_range: '7750 USD/Mes',
            type: '全职',
            posted_at: '2天前',
            match_score: 66,
            tags: ['Python', 'SQL', 'Machine Learning', 'TensorFlow', 'AWS'],
            match_reasons: [
                '技能匹配度高达66%，符合岗位要求',
                '远程工作模式符合期望',
                '薪资范围在期望区间内'
            ]
        };

        function generateNewDesignCard() {
            const logoPlaceholder = newCard.company ? newCard.company.charAt(0).toUpperCase() : 'C';
            
            return `
                <div class="job-card" data-id="${newCard.id}">
                    <div class="job-card-content">
                        <div class="job-card-header">
                            <div class="job-card-title">
                                <h4 title="${newCard.title}">${newCard.title}</h4>
                                <span class="job-badge">${newCard.type}</span>
                            </div>
                            <div class="job-match" title="综合匹配度">
                                <span>${newCard.match_score}</span>
                            </div>
                        </div>
                        
                        <div class="job-card-company">
                            <div class="job-logo">${logoPlaceholder}</div>
                            <span title="${newCard.company}">${newCard.company}</span>
                        </div>
                        
                        <div class="job-card-meta">
                            <span title="工作地点"><i class="fas fa-map-marker-alt"></i>${newCard.location}</span>
                            <span title="薪资范围"><i class="fas fa-yen-sign"></i>${newCard.salary_range}</span>
                            <span title="发布时间"><i class="fas fa-clock"></i>${newCard.posted_at}</span>
                        </div>
                        
                        <div class="job-card-reasons">
                            ${newCard.match_reasons.map(reason => `<div class="reason">${reason}</div>`).join('')}
                        </div>
                        
                        <div class="job-card-tags">
                            ${newCard.tags.map(tag => `<span class="job-tag" title="${tag}">${tag}</span>`).join('')}
                        </div>
                        
                        <div class="job-card-actions">
                            <button class="btn btn-outline" data-action="compare" title="添加到对比">
                                <i class="fas fa-balance-scale"></i> 对比
                            </button>
                            <button class="btn btn-secondary" data-action="favorite" title="收藏职位">
                                <i class="fas fa-heart"></i> 收藏
                            </button>
                            <button class="btn btn-primary" data-action="detail" title="查看详细信息">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                        </div>
                    </div>
                </div>
            `;
        }

        // 页面加载完成后生成卡片
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.getElementById('newDesignCards');
            container.innerHTML = generateNewDesignCard();
            
            // 添加按钮交互效果
            const buttons = container.querySelectorAll('.btn');
            buttons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    const originalText = this.innerHTML;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
                    this.disabled = true;
                    
                    setTimeout(() => {
                        this.innerHTML = originalText;
                        this.disabled = false;
                        
                        const action = this.dataset.action;
                        if (action === 'favorite') {
                            this.innerHTML = '<i class="fas fa-heart" style="color:#e53e3e;"></i> 已收藏';
                            this.classList.add('active');
                        } else if (action === 'compare') {
                            this.innerHTML = '<i class="fas fa-check"></i> 已添加';
                            this.classList.add('active');
                        } else if (action === 'detail') {
                            alert('这是一个演示效果！');
                        }
                    }, 1200);
                });
            });
        });
    </script>
</body>
</html> 